<template>
    <div class="hello">
        <!-- 第2行 -->
        <div class="row row1">
            <div class="grid width50">
                <div class="contain">
                    <div class="width100 height50 top">
                        <ul class="flex height">
                            <li class="name-word">
                                <dl class="data-word">
                                    <dt>2016年园区产值(亿元)</dt>
                                    <dd class="line1-dd" v-for="(val, index) in topData1"  :key="index">{{ val.parkValue }}</dd>
                                </dl>
                            </li>
                            <li class="name-word">
                                <dl class="data-word">
                                    <dt>同比增长</dt>
                                    <dd class="line1-dd">{{ topData2.lastYearGDPCompare }}</dd>
                                </dl>
                            </li>
                            <li class="name-word">
                                <dl class="data-word">
                                    <dt>占本市软件行业总产值</dt>
                                    <dd class="line1-dd">{{ topData3.parkGDPInSuperiorPercent }}</dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="width100 height50 bottom">
                        <ul class="flex height">
                            <li class="name-word">
                                <dl class="data-word" v-for="(val,index) in bottomData1" :key="index">
                                    <dt>2016年园区产值(亿元)</dt>
                                    <dd>{{ val.parkValue }}</dd>
                                </dl>
                            </li>
                            <li class="name-word">
                                <dl class="data-word">
                                    <dt>同比增长</dt>
                                    <dd>{{ bottomData2.lastYearGDPCompare }}</dd>
                                </dl>
                            </li>
                            <li class="name-word">
                                <dl class="data-word">
                                    <dt>占本市软件行业总产值</dt>
                                    <dd>{{ bottomData3.parkGDPInSuperiorPercent }}</dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="grid width50">
                <div class="grid-title">园区产值行业分布</div>
                <div class="grid-body">
                    <div class="scroll-div">
                        <div id="chartsju" style="width:90%; height:100%"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第一行 -->
        <div class="row row2">
            <div class="grid width60">
                <div class="grid-title">园区六大行业产值情况</div>
                <div class="grid-body">
                    <div id="bargrid" style="width:100%; height:100%"></div>
                </div>
            </div>
            <div class="grid width40">
                <div class="grid-title">园区产值贡献前五企业</div>
                <div class="grid-body">
                    <div class="company-val">
                        <ul class="colorfff">
                            <li class="width65 ccc">企业名称</li>
                            <li class="width35 ccc">所属行业</li>
                        </ul>
                        <div
                            class="colorfff"
                            v-for="(company, key, index) in companys"
                            :key="key"
                            :index="index"
                        >
                            <ul class="company-item" v-for="(text,index) in company" :key="index">
                                <li>
                                    <span>{{key}}</span>
                                    {{ index }}
                                </li>
                                <li>{{ text.affiliationTrades }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import {
    mapState,
    mapActions
} from 'vuex'
export default {
    data() {
        return {}
    },
    mounted: function () {
        this.drawbar('bargrid');
        //矩形
        this.juxing('chartsju')
    },
    computed: {
        ...mapState({
            valueUrl: state => state.Values.valueUrl,
            companys: state => state.Values.companys,
            topData1: state => state.Values.topData1,
            topData2: state => state.Values.topData2,
            topData3: state => state.Values.topData3,
            bottomData1: state => state.Values.bottomData1,
            bottomData2: state => state.Values.bottomData2,
            bottomData3: state => state.Values.bottomData3,
            barArr: state => state.Values.barArr
        })
    },
    created: function () {
        console.log(this.valueUrl)
        this.loadValue(this.valueUrl);
    },
    methods: {
        ...mapActions([
            'loadValue'
        ]),
        drawbar(id) {
            let myChart = echarts.init(document.getElementById(id));
            let option = {
                title: {},
                tooltip: {
                    trigger: 'axis'
                },
                // legend: {
                //     data: ['蒸发量', '降水量'],
                //     top: 10,
                //     right: 50,
                //     textStyle: {
                //         color: '#9fadc7'
                //     }
                // },
                toolbox: {
                    show: false,
                    feature: {
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                grid: {
                    top: '15%',
                    left: '10%',
                    right: '10%',
                    bottom: '10%',
                    containLabel: true
                },
                calculable: true,
                xAxis: [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9fadc7' //X轴字的颜色
                        }
                    },
                    splitLine: { //不显示分割线
                        show: false
                    },
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
                }],
                yAxis: [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9fadc7'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    type: 'value'
                }],
                series: [
                    {
                        name: '降水量',
                        type: 'bar',
                        barGap: '5%',
                        itemStyle: {
                            normal: {
                                color: '#4b8fdd'
                            }
                        },
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2]
                    }
                ]
            };
            let optiondata = new Array();
            let dealdata = (dataArr) => {
                
                let obj = [
                    {
                        name: '降水量',
                        type: 'bar',
                        barGap: '5%',
                        itemStyle: {
                            normal: {
                                color: '#4b8fdd'
                            }
                        },
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        barGap: '5%',
                        itemStyle: {
                            normal: {
                                color: '#4b8fdd'
                            }
                        },
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2]
                    }
                ]
                return obj;
            }
            dealdata()
            myChart.setOption(option);
        },
        juxing(id) {
            let myChart = echarts.init(document.getElementById(id));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}"
                },
                series: [{
                    type: 'treemap',
                    width: '100%',
                    height: '100%',
                    roam: false, //关闭平移拖动
                    nodeClick: false, //关闭节点点击
                    silent: false, //关闭鼠标事件
                    breadcrumb: {
                        show: false
                    },
                    label: { //描述了每个矩形中，文本标签的样式。
                        normal: {
                            show: true,
                            position: ['40%', '40%']
                        }
                    },
                    itemStyle: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                            },
                            borderWidth: 2,
                            borderColor: '#333333'
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{
                        value: 12,
                        name: '个人征信4 \n 65%%',
                        itemStyle: {
                            normal: {
                                color: "#c475d4",
                            }
                        }
                    }, {
                        value: 15,
                        name: '个人征信 \n 46%',
                        itemStyle: {
                            normal: {
                                color: "#d44985",
                            }
                        }
                    },
                    {
                        value: 15,
                        name: '大数据风2控 \n 80%',
                        itemStyle: {
                            normal: {
                                color: "#d72fa2",
                            }
                        }
                    },
                    {
                        value: 20,
                        name: '大数据风控\n 40%',
                        itemStyle: {
                            normal: {
                                color: "#c21a62",
                            }
                        }
                    }, {
                        value: 15,
                        name: '大数据风控3\n 20%',
                        itemStyle: {
                            normal: {
                                color: "#dd2172",
                            }
                        }
                    }, {
                        value: 15,
                        name: '区块链\n80%',
                        itemStyle: {
                            normal: {
                                color: "#5e0671",
                            }
                        }
                    }
                    ]
                }]
            };
            myChart.setOption(option);
        }
    }
}
</script>



<style lang="scss" scoped>
.scroll-div {
  width: 90%;
  height: 90%;
  margin: 0 auto;
}
.ccc {
  color: #ccc;
}
.company-item {
  li {
    float: left;
    span {
      margin-right: 10px;
    }
  }
}
.colorfff {
  overflow: hidden;
  color: #fff;
}
.row1 {
  height: 45%;
}
.row2 {
  height: 55%;
}
.company-val {
  padding: 30px;
  ul {
    li {
      float: left;
      list-style: none;
      line-height: 4;
      &:first-child {
        width: 60%;
      }
      &:nth-child(2) {
        width: 40%;
      }
    }
  }
}
.data-word {
  dt {
    color: #898989;
  }
  dd {
    font-size: 1.5625rem;
    text-align: center;
    color: #fff;
    &.line1-dd {
      font-size: 3rem;
    }
  }
}
</style>